<!--
 * @Descripttion: 
 * @version: 
 * @Author: ewgof
 * @Date: 2020-08-31 16:38:07
 * @LastEditors: ewgof
 * @LastEditTime: 2020-12-04 17:56:20
-->

<div class="layui-container">
    <div class="layui-row">
        <!-- 首页主要区域 -->
        <div class="layui-col-lg12">
            <div id="main">
                <div class="alert alert-warning" role="alert" id="index-top-notice">
                    <!-- 网站首页提示信息 -->
                </div>
                <!-- 选择按钮 -->
                <!-- 是否压缩图片 -->
                <div id="img-other">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">压缩图片</label>
                            <div id="compress" class="layui-input-block">
                                <input type="radio" name="compress" value="no" title="不压缩">
                                <input type="radio" name="compress" value="yes" title="压缩" checked="checked">
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 选择按钮END -->
                <!-- 上传区域 -->
                <div class="layui-form-item">
                    <div class="layui-col-lg7" style="margin-top: 10px;">
                        <label class="layui-form-label">图片水印: </label>
                        <div class="layui-input-block">
                            <input id="watermark" type="text" name="watermark" value="" title="图片水印内容" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-upload-drag" id="upimg">
                        <i class="layui-icon"></i>
                        <p>点击上传图片，支持拖拽上传</p>
                    </div>
                </div>
                <!-- 上传区域END -->
            </div>
        </div>
        <!-- 首页主要区域END -->
    </div>
    <div class="layui-row">
        <div class="layui-col-lg12" id="imgshow">
            <!-- 图片显示区域 -->
            <!-- 显示缩略图 -->
            <div class="layui-col-lg4">
                <div id="img-thumb"><a href="" target="_blank" alt="点此可查看详情"><img src=""></a></div>
            </div>
            <!-- 显示地址 -->
            <div class="layui-col-lg7 layui-col-md-offset1">
                <div id="links">
                    <table class="layui-table" lay-skin="nob" lay-size="sm">
                        <colgroup>
                            <col width="100">
                            <col width="450">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>URL</td>
                                <td><input type="text" class="layui-input" id="url" data-cip-id="url"></td>
                                <td><a href="javascript:;" class="layui-btn layui-btn-sm"
                                        onclick="copyurl('url')">复制</a></td>
                            </tr>
                            <tr>
                                <td>HTML</td>
                                <td><input type="text" class="layui-input" id="html" data-cip-id="html"></td>
                                <td><a href="javascript:;" class="layui-btn layui-btn-sm"
                                        onclick="copyurl('html')">复制</a></td>
                            </tr>
                            <tr>
                                <td>Markdown</td>
                                <td><input type="text" class="layui-input" id="markdown" data-cip-id="markdown">
                                </td>
                                <td><a href="javascript:;" class="layui-btn layui-btn-sm"
                                        onclick="copyurl('markdown')">复制</a></td>
                            </tr>
                            <tr>
                                <td>BBCode</td>
                                <td><input type="text" class="layui-input" id="bbcode" data-cip-id="bbcode"></td>
                                <td><a href="javascript:;" class="layui-btn layui-btn-sm"
                                        onclick="copyurl('bbcode')">复制</a></td>
                            </tr>
                            <!-- <tr>
                                <td>Delete Link</td>
                                <td><input type="text" class="layui-input" id="dlink" data-cip-id="dlink"></td>
                                <td><a href="javascript:;" class="layui-btn layui-btn-sm"
                                        onclick="copyurl('dlink')">复制</a></td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 图片显示区域END -->
        </div>
    </div>
</div>
<script>
    $('#index-top-notice').load('./notice.html');

    var load1 = document.querySelector("#upimg");
    var token = localStorage.getItem('token');
    if (token) {
        var upload_url = window.config.api_url + "api/userupload";
    } else {
        var upload_url = window.config.api_url + "api/guestupload";
    }

    layui.use(['upload', 'form', 'element', 'layer', 'flow'], function () {
        var upload = layui.upload;
        var layer = layui.layer;

        if (window.config.token) {
            var token = window.config.token;
            var upload_url = window.config.api_url + "api/userupload";
        } else {
            var token = '';
            var upload_url = window.config.api_url + "api/guestupload";
        }

        


        //执行图片上传
        upload.render({
            elem: '#upimg' //绑定元素
            //选择的时候触发
            ,
            url: upload_url, //上传接口
            accept: 'file',
            // acceptMime: 'image/webp,image/jpeg,image/pjpeg,image/bmp,image/png,image/x-png,image/gif',
            acceptMime: 'image/*',
            exts: 'jpg|jpeg|png|gif|bmp|webp',
            field: 'image',
            size: 10240,
            headers: {
                rtime: window.func.getTime(),
                token: token
            },
            data: {
                index: 'image', watermark: function() {return $('#watermark').val()}, compress: function() {return $('#compress > input:checked').val()}
            },
            // choose: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
            //     //uploadListIns.config.data.storage  = storage;
            //     storage = $('#storage input[name="storage"]:checked ').val();
            //     //this.url = '/upload/' + storage;
            //     //console.log(this.url);
            // },
            before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            },
            done: function (res) {
                // console.log(res);
                //上传完毕回调
                if (res.code == 0) {
                    var url = res.data.url;
                    $("#img-thumb a").attr('href', url);
                    $("#img-thumb img").attr('src', url);
                    $("#url").val(url);
                    $("#html").val("<img src = '" + url + "' />");
                    $("#markdown").val("![](" + url + ")");
                    $("#bbcode").val("[img]" + url + "[/img]");
                    // $("#dlink").val(res.delete);
                    $("#imgshow").show();
                    //对图片进行鉴黄识别
                    // identify(res.id);

                } else {
                    //如果上传失败
                    layer.open({
                        title: '温馨提示',
                        content: res.msg
                    });
                }
                layer.closeAll('loading');
            },
            error: function () {
                //请求异常回调
                window.func.error();
                layer.closeAll('loading');
            }
        });
        //单文件上传END
    });
</script>